<template>
  <div>
    <!-- 条件查询洗车退款表单 -->
    <div class="check-form-box">
      <el-form
        :inline="true"
        :model="searchModel.data"
        class="demo-form-inline"
      >
        <el-form-item label="华行通订单号">
          <el-input
            class="input-mainOrderId"
            v-model.trim="searchModel.mainOrderSn"
            placeholder="请输入华行通订单号"
          />
        </el-form-item>
        <el-form-item label="用户手机号">
          <el-input
            v-model.trim="searchModel.mobile"
            :formatter="(value) => value.replace(/[^\d]/g, '')"
            maxlength="11"
            placeholder="请输入用户手机号"
          />
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="searchModel.checkState" placeholder="请选择">
            <el-option label="全部" :value="null" />
            <el-option label="待审核" value="0" />
            <el-option label="审核通过" value="1" />
            <el-option label="审核不通过" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="退款状态">
          <el-select v-model="searchModel.refundState" placeholder="请选择">
            <el-option label="全部" :value="null" />
            <el-option label="退款中" value="0" />
            <el-option label="退款成功" value="2" />
            <el-option label="退款失败" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" color="#ea5b24" @click="searchOrder()"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 洗车退款订单列表 -->
    <div>
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column
          prop="wnMainOrderSn"
          width="200"
          label="华行通主订单号"
        />
        <el-table-column
          prop="thirdPartyRefundNo"
          width="130"
          label="第三方退款单号"
        />
        <el-table-column prop="userId" label="用户ID" />
        <el-table-column prop="mobile" label="用户手机号" />
        <el-table-column prop="refundAmt" label="退款金额" />
        <el-table-column prop="payTotal" label="实付金额" />
        <el-table-column
          prop="sdCodeState"
          :formatter="judgeOrderState"
          width="130"
          label="核销状态"
        />
        <el-table-column
          prop="refundState"
          :formatter="judgeRefundState"
          label="退款状态"
        />
        <el-table-column
          prop="checkState"
          :formatter="judgeCheckState"
          label="审核状态"
        />
        <el-table-column prop="gmtCreate" width="160" label="申请时间" />
        <el-table-column prop="checkTime" width="160" label="审核时间" />
        <el-table-column prop="checkName" label="审核人" />
        <el-table-column fixed="right" label="操作" v-if="pinia.isShow[106]">
          <template v-slot:default="scope">
            <div v-if="scope.row.checkState === 0">
              <el-button
                link
                type="primary"
                size="small"
                @click="examineDialog(scope.row)"
                >审核</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <div style="text-align: center">
        <el-pagination
          :total="totalNum"
          @current-change="handleCurrentChange"
          background
          :page-size="size"
          layout="prev, pager, next, total"
          :current-page="page"
        />
      </div>
    </div>

    <!-- 审核dialog -->
    <el-dialog
      v-model="examineDialogVisible"
      title="审核"
      center="true"
      modal="true"
      width="400px"
    >
      <el-form :model="examineParam" label-width="80" label-position="right">
        <!-- <el-form-item label="etc订单退款类型:">
                    <el-radio-group v-model="examineParam.etcRefundType">
                        <el-radio :label="0">普通退款</el-radio>
                        <el-radio :label="1">强制退款</el-radio>
                    </el-radio-group>
                </el-form-item> -->
        <el-form-item label="审核状态:">
          <el-radio-group v-model="examineParam.state">
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="原因:">
          <el-input
            v-model.trim="examineParam.note"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            autocomplete="off"
            style="width: 250px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" color="#ea5b24" @click="examineReview()"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import {
  findRefundDetailsApi,
  examineRefundOrderApi,
} from "../../../api/index";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 分页列表数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
const size = 8;

// 审核dialog控制
const examineDialogVisible = ref(false);
// 审核参数
const examineParam = reactive({
  mainOrderId: null,
  refundId: null,
  etcRefundType: null,
  note: null,
  state: null,
});

// 翻页
let flipData = reactive({
  page: page,
  size: size,
});
const handleCurrentChange = (val: number) => {
  page.value = val;
  flipData.page = page.value;
  findOrder(flipData);
};

// 搜索模型
const searchModel: any = reactive({
  mainOrderSn: null,
  mobile: null,
  checkState: null,
  refundState: null,
  page: page,
  size: size,
});

// orderState	        订单状态         0:未支付 1:已支付 2:订单取消 3:订单过期
// latestRefundState	最后一次退款状态 0:未退款 1:退款中 2:退款失败 3:退款成功
// codeType	            二维码类型       0:未核销 1:已核销 2:已过期 null:未支付
// sdOrderStatus        洗车下单状态     0:未下单 1:下单成功 2:下单失败

// 过滤订单状态
function judgeState(item) {
  switch (item.compositeState) {
    case 1:
      return "未支付";
    case 2:
      return "已支付";
    case 4:
      return "退款中";
    case 5:
      return "退款成功";
    case 6:
      return "退款失败";
    case 7:
      return "支付中";
    case 8:
      return "支付失败";
    case 9:
      return "已取消";
    default:
      return "";
  }
}

// 过滤洗车二维码状态
function judgeOrderState(item) {
  switch (item.sdCodeState) {
    case 0:
      return "未核销";
    case 1:
      return "已核销";
    case 2:
      return "已过期";
    case 3:
      return "已取消";
    default:
      return "";
  }
}

// 过滤退款状态
function judgeRefundState(item) {
  switch (item.refundState) {
    case 0:
      return "退款中";
    case 1:
      return "退款失败";
    case 2:
      return "退款成功";
    default:
      return "";
  }
}

// 过滤审核状态
function judgeCheckState(item) {
  switch (item.checkState) {
    case 0:
      return "待审核";
    case 1:
      return "审核通过";
    case 2:
      return "审核不通过";
    default:
      return "";
  }
}

// 订单状态枚举
const stateOptions: any = reactive([
  { value: null, label: "全部" },
  { value: 1, label: "未支付" },
  { value: 2, label: "已支付" },
  { value: 3, label: "已核销" },
  { value: 4, label: "退款中" },
  { value: 5, label: "退款成功" },
  { value: 6, label: "退款失败" },
]);

// 打开审核dialog
const examineDialog = (row) => {
  Object.keys(examineParam).forEach((key) => (examineParam[key] = null));
  examineDialogVisible.value = true;
  examineParam.etcRefundType = 0;
  examineParam.mainOrderId = row.mainOrderId;
  examineParam.refundId = row.refundId;
};

// 搜索退款详情
const searchOrder = () => {
  page.value = 1;
  searchParmSearch();
  findOrder(searchModel);
  flipData = JSON.parse(JSON.stringify(searchModel));
};
// 搜索参数检查
const searchParmSearch = () => {
  Object.keys(searchModel).forEach((key) => {
    if (!searchModel[key]) {
      searchModel[key] = null;
    }
  });
};

// 查询洗车退款订单
const findOrder = (searchModel) => {
  findRefundDetailsApi(searchModel).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data.items;
      totalNum.value = res.data.data.total;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

// 审核
const examineReview = () => {
  if (examineParam.state == null) {
    ElMessage.error("请选择审核状态.");
    return;
  }
  if (
    examineParam.state == 2 &&
    (examineParam.note == "" || examineParam.note == null)
  ) {
    ElMessage.error("请输入不通过原因.");
  } else {
    examineRefundOrderApi(examineParam).then((res) => {
      if (res.data.code === 2000) {
        ElMessage({
          message: "审核成功.",
          type: "success",
        });
      } else {
        switch (res.data.code) {
          case 4014:
            ElMessage.error("该订单支付通道错误，请联系管理员.");
            break;
          case 5000:
            ElMessage.error("当前订单正在退款中，请勿频繁操作.");
            break;
          default:
            ElMessage.error("审核失败.");
            break;
        }
      }
      examineDialogVisible.value = false;
      findOrder(searchModel);
    });
  }
};

onMounted(() => {
  findOrder(searchModel);
});
</script>
<style scoped>
.input-mainOrderId {
  width: 300px;
}

/* :deep(.demo-form-inline) {
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(auto-fill, 530px);
} */

:deep(.el-input__inner) {
  width: 150px;
}
</style>
